{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
	<title>output</title>
	<meta charset="utf-8"></meta>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="../static/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<link href="../static/css/video-js.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="../static/css/build.css">
	<script src="../static/js/jquery-3.3.1.min.js" type="text/javascript"></script>
	<script src="../static/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="../static/js/myScript.js" type="text/javascript"></script>
	<script src="../static/js/video.js" type="text/javascript"></script>
	<link rel="stylesheet" href="../static/assets/hivideo.css" />
    <script type="text/javascript" src="../static/js/hivideo.js"></script>

    <script type="text/javascript"  src="../static/js/echarts.min.js"></script>
    <script type="text/javascript"  src="../static/js/china.js"></script>
    <script type="text/javascript" src="../static/js/main.js"></script>
    <script type="text/javascript">

    </script>
    <style type="text/css">
    	body {
			/*margin:0;padding:0;font-size:12px;*/
			/* 加载背景图 */
			/*background-image: url(../static/images/beijing4.jpg);*/

			/* 背景图垂直、水平均居中 */
			background-position: center center;

			/* 背景图不平铺 */
			background-repeat: no-repeat;

			/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
			background-attachment: fixed;

			/* 让背景图基于容器大小伸缩 */
			background-size: cover;
		}
    </style>
</head>
<body>
	<div id="Headrow" class="row" style="height:100px;">
		<h1 align="center" id="HeadH1">
		<p id="HeadTxt">video_score_output</p>
	</div>

	<div class="col-md-12" style="text-align:center;height:400px;">
        <div class="col-md-12 col-md-1">
            <select id="mxkg1" type="button" class="btn btn-default dropdown-toggle">
                <option value ="1">模型类型</option>
                <option value ="2">csrnet</option>
                <option value ="3">espgan</option>
            <select>
            <br><br>
            <select id="mxkg2" type="button" class="btn btn-default dropdown-toggle">
                <option value ="1">模型参数</option>
                <option value ="2">01_3_3_3</option>
                <option value ="3">02_1_1_1</option>
            <select>
            <br><br>
            <select id="mxkg3" type="button" class="btn btn-default dropdown-toggle">
                <option value ="1">选择日期</option>
                <option value ="2">18/10.27</option>
                <option value ="3">18/10.26</option>
            <select>
            <br><br>
            <select id="mxkg4" type="button" class="btn btn-default dropdown-toggle">
                <option value ="1">显示数目</option>
                <option value ="2">all</option>
                <option value ="3">top 5</option>
            <select>
        </div>
        <div class="col-md-12 col-md-3">
            <h3 align="left">模型客观评分</h3>
            <div align="center" >
                <div id="main" style="width: 650px;height:350px;"></div>
             </div>
        </div>
        <div class="col-md-12 col-md-2"></div>
        <div class="col-md-12 col-md-5">
            <h3 align="left">模型评分历史数据</h3>
            <div align="center" >
                <div id="main1" style="width: 670px;height:320px;"></div>
             </div>
        </div>
        <div class="col-md-12 col-md-1">
            <select id="mxkgls1" type="button" class="btn btn-default dropdown-toggle">
                <option value ="1">模型类型</option>
                <option value ="2">test2</option>
                <option value ="3">test3</option>
            <select>
            <br><br>
            <select id="mxkgls2" type="button" class="btn btn-default dropdown-toggle">
                <option value ="1">模型参数</option>
                <option value ="2">test2</option>
                <option value ="3">test3</option>
            <select>
        </div>
    </div>

    <div class="col-md-12" style="text-align:center;">
        <div class="col-md-12 col-md-1">
            <select id="cfxn1" type="button" class="btn btn-default dropdown-toggle">
                <option value ="1">模型类型</option>
                <option value ="2">test2</option>
                <option value ="3">test3</option>
            <select>
            <br><br>
            <select id="cfxn2" type="button" class="btn btn-default dropdown-toggle">
                <option value ="1">模型参数</option>
                <option value ="2">test2</option>
                <option value ="3">test3</option>
            <select>
            <br><br>    
            <select id="cfxn3" type="button" class="btn btn-default dropdown-toggle">
                <option value ="1">选择日期</option>
                <option value ="2">test2</option>
                <option value ="3">test3</option>
            <select>
            <br><br>
            <select id="cfxn4" type="button" class="btn btn-default dropdown-toggle">
                <option value ="1">显示数目</option>
                <option value ="2">test2</option>
                <option value ="3">test3</option>
            <select>
        </div>
        <div class="col-md-12 col-md-3">
            <h3 align="left">超分性能</h3>
            <div align="center" >
                <div id="main2" style="width: 650px;height:350px;"></div>
             </div>
        </div>
        <div class="col-md-12 col-md-2"></div>
        <div class="col-md-12 col-md-5">
            <h3 align="left">超分性能历史数据</h3>
            <div align="center" >
                <div id="main3" style="width: 670px;height:350px;"></div>
             </div>
        </div>
         <div class="col-md-12 col-md-1">
            <select id="cfxnls1" type="button" class="btn btn-default dropdown-toggle">
                <option value ="1">模型类型</option>
                <option value ="2">test2</option>
                <option value ="3">test3</option>
            <select>
            <br><br>
            <select id="cfxnls2" type="button" class="btn btn-default dropdown-toggle">
                <option value ="1">模型参数</option>
                <option value ="2">test2</option>
                <option value ="3">test3</option>
            <select>
        </div>
    </div>

</body>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    // $("#main1").hide();
    // $("#main2").hide();
    // $("#main3").hide();
    getCircleData();
    getChartPolyline();
    getSuperData();
    getColumnarData();

    //main 
        var myChart = echarts.init(document.getElementById('main'));
        function getTraversing(result){
            series = []
            console.log(typeof(result['msr_name'][0]))
            var objKeys=Object.keys(result);
            for(var i = 0;i<objKeys.length;i++){
                // alert(i);
                
                series.push({
                        // name: i,
                        name:result['msr_name'][i],
                        symbolSize: 10,
                        data:result['array'+i],
                        type: 'scatter',
                        label: {
                            emphasis: {
                                show: true,
                                formatter: function (param) {
                                    return param.data[2]+': '+param.data[1];
                                },
                                position: 'top',
                            }
                        },
                    },);
            }
            return series

        }
        function getCircleData() {
            $.ajax({
                type : "get",
                async : true, //同步执行
                url : "/output/v1.0/chart/scatter/",
                data : {},
                dataType : "json", //返回数据形式为json
                success : function(result) {
                    console.log(result);
                    var data=[result];
                    option = {
                        backgroundColor: new echarts.graphic.RadialGradient(0.0, 0.0, 0.0, [{
                            offset: 0,
                            color: '#f7f8fa'
                        }, {
                            offset: 1,
                            color: '#cdd0d5'
                        }]),
                        title: {
                            // text: '模型客观评分'
                        },
                        legend: {
                            right: 10,
                            // data: result['msr_name']
                        },
                        xAxis: {
                            type: 'value',
                            
                        },
                        yAxis: {
                            type: 'value',
                            min:78
                            // boundaryGap: false,
                            // data: [1,2,3,4,5,6,7,8,9,10]
                        },
                        series: getTraversing(result),
                    };

                    // myChart.hideLoading(option);  font-weight: bold;
                    myChart.setOption(option);
                },
                error : function(errorMsg) {
                    $("#main").html('<h2 id="chart3-nodata" style="text-align: center;line-height: 180px">暂无数据</h2>')
                }
            });
        }

    //main1

        var syChart = echarts.init(document.getElementById('main1'));
        function getChartPolyline() {
            $.ajax({
                type : "get",
                async : true, //同步执行
                url : "/output/v1.0/chart/polyline/",
                data : {},
                dataType : "json", //返回数据形式为json
                success : function(result) {
                    // console.log(result['datelist'])
                    console.log(result['datelist'])
                    console.log(result['name'])
                    // return;
                    option1 = {
                        title: {
                            // text: '模型评分历史数据'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            // data:syc
                            data:result['name']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            // data: ['10/17','10/18','10/19','10/20','10/21','10/22','10/23']
                            data:result['datelist']
                        },
                        yAxis: {
                            type: 'value',
                            min: '70'
                        },
                        // series: series
                        series:getSeries(result['data'],result['array'])
                    };
                    syChart.setOption(option1);
                },
                error : function(errorMsg) {
                    $("#main1").html('<h2 id="chart3-nodata" style="text-align: center;line-height: 180px">暂无数据</h2>')
                }
            });
        }

    //main2
        var brChart = echarts.init(document.getElementById('main2'));
        function getColumnarData() {
            $.ajax({
                type : "get",
                async : true, //同步执行
                url : "/output/v1.0/chart/columnar/",
                data : {},
                dataType : "json", //返回数据形式为json
                success : function(result) {
                    // console.log(result['name']);
                    option2 = {
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        title: {
                            // text: '超分性能'
                        },
                        legend: {
                            data: ['Pre_Time', 'NPU_Time','Post_Time']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: result['pre']
                        },
                        xAxis:  {
                            
                            type: 'category',
                            // data: ['10/20','10/21','10/22','10/23','10/24','10/25','10/26']
                            data:result['name']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: 'Pre_Time',
                                type: 'bar',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'insideRight'
                                    }
                                },
                                data: result['pre']
                            },
                            {
                                name: 'NPU_Time',
                                type: 'bar',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'insideRight'
                                    }
                                },
                                data: result['npu']
                            },
                            {
                                name: 'Post_Time',
                                type: 'bar',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'insideRight'
                                    }
                                },
                                data: result['post']
                            }
                        ]
                    };
                    brChart.setOption(option2);
                },
                error : function(errorMsg) {
                    $("#main2").html('<h2 id="chart3-nodata" style="text-align: center;line-height: 180px">暂无数据</h2>')
                }
            });
        }

    //main3
        var stChart = echarts.init(document.getElementById('main3'));
        function getSeries(result,array){
            var series=[];
            var valdata = []
            for(var i = 0;i<result.length;i++){
                series.push({
                    // name: result[i][0].substring(0,10),
                    name: result[i][0],
                    type: 'line',
                    data: array[i]
                });
            }
            return series
        }
        function getSuperData() {
            $.ajax({
                type : "get",
                async : true, //同步执行
                url : "/output/v1.0/chart/super/",
                data : {},
                dataType : "json", //返回数据形式为json
                success : function(result) {
                    // console.log(result['datelist'])
                    console.log(result['datelist'])
                    console.log(result['sr_name'])
                    // return;
                    // console.log(result['name'].length);
                    option3 = {
                        title: {
                            // text: '超分性能历史数据',
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            // data:result['sr_name']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: result['datelist']
                        },
                        yAxis: {
                            type: 'value',
                            min:'60'
                        },
                        series:getSeries(result['data'],result['array'])
                    };
                    stChart.setOption(option3);
                },
                error : function(errorMsg) {
                    $("#main3").html('<h2 id="chart3-nodata" style="text-align: center;line-height: 180px">暂无数据</h2>')
                }
            });
        }


// 实例化eChart图表
function initEchart( idName, option ) {
    var myEchart = echarts.init( document.getElementById("main5") );

    myEchart.setOption(option);
}

// 随机数生成
function randomNum(digitNumber, holdNumber) {
    var random = Math.random();
    random = Math.pow( 10, digitNumber ) * random;
    random = random.toFixed(holdNumber);
    return random;
}
</script>
</html>











